<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        * {
          padding: 0;
          margin: 0;
          box-sizing: border-box;
        }
     
        .container {
          width: 1200px;
          margin: 0 auto;
        }
     
        .video video {
          width: 100%;
          padding: 20px 0;
        }
     
        .elevator {
          position: fixed;
          top: 280px;
          right: 20px;
          z-index: 999;
          background: #fff;
          border: 1px solid #e4e4e4;
          width: 60px;
        }
     
        .elevator a {
          display: block;
          padding: 10px;
          text-decoration: none;
          text-align: center;
          color: #999;
        }
     
        .elevator a.active {
          color: #1286ff;
        }
     
        .outline {
          padding-bottom: 300px;
        }
      </style>
</head>
<body>
    <div class="container">
        <div class="header">
          <a href="http://pip.itcast.cn">
            <img src="https://pip.itcast.cn/img/logo_v3.29b9ba72.png" alt="" />
          </a>
        </div>
        <div class="video">
          <video src="https://v.itheima.net/LapADhV6.mp4" controls></video>
        </div>
        <div class="elevator">
          <a href="javascript:;" data-ref="video">视频介绍</a>
          <a href="javascript:;" data-ref="intro">课程简介</a>
          <a href="javascript:;" data-ref="outline">评论列表</a>
        </div>
      </div>
      <script src="./lodash.min.js"></script>
      <script>
        //1. 获取元素 要对视频进行操作
        const video = document.querySelector('video')
        video.ontimeupdate = _.throttle(() => {
            // console.log(video.currentTime) 获得当前的视频时间
            localStorage.setItem('currentTime', video.currentTime)
        }, 1000)
        //打开页面 触发事件，就从本地存储里面取出记录的时间 赋值给 video.currentTime
        video.onloadeddata = () => {
            video.currentTime = localStorage.getItem('currentTime') || 0
        }
      </script>
</body>
</html>